<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p id="first">测试1</p>
    <p id="second">测试2</p>
    <input type="text" id="changeTextColor" onclick="" value="" onchange="toUpperCase()"/>
</div>
</body>
</html>
<script>
    // var nodeName = document.createElement("p");
    // var nodeValue = document.createTextNode("这是插入的内容");
    // nodeName.appendChild(nodeValue);
    // document.getElementsByTagName("div")[0].insertBefore(nodeName, document.getElementById("first"));
    // document.getElementsByTagName("div")[0].replaceChild(document.getElementById("first"));
    // document.getElementById("first").parentNode.replaceChild(nodeName,document.getElementById("first"));
    document.getElementById("changeTextColor").onclick = function () {
        changeTextColor()
    };

    function changeTextColor() {
        document.getElementById("first").innerHTML = "已经变换了内容";
        document.getElementById("second").style.color = "#00ffff";
    }

    function toUpperCase() {
        document.getElementById("changeTextColor").value = document.getElementById("changeTextColor").value.toLocaleUpperCase();
    }

</script>